<template>
  <demoBlock title="固定列" padding>
    <vcu-table bordered :columns="columns" :datas="data" :scroll="{ x: 1300, y: 240 }" />
  </demoBlock>
</template>

<script>
import { defineComponent } from "vue";

const columns = [
  {
    title: "姓名",
    width: 100,
    dataIndex: "name",
    key: "name",
    fixed: "left",
  },
  { title: "年龄", width: 100, dataIndex: "age", key: "age" },
  { title: "列 1", dataIndex: "address", key: "1" },
  { title: "列 2", dataIndex: "address", key: "2" },
  { title: "列 3", dataIndex: "address", key: "3" },
  { title: "列 4", dataIndex: "address", key: "4" },
  { title: "列 5", dataIndex: "address", key: "5" },
  { title: "列 6", dataIndex: "address", key: "6" },
  { title: "列 7", dataIndex: "address", key: "7" },
  { title: "列 8", dataIndex: "address", key: "8" },
];

const data = [...Array(100)].map((_, i) => ({
  key: i,
  name: `张三 ${i}`,
  age: 32,
  address: `木星. ${i}`,
}));

export default defineComponent({
  setup() {
    return {
      data,
      columns,
    };
  },
});
</script>
